<template>
  <div :class="classes" @mousedown.prevent>
    <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
      <div
        :class="[prefixCls + '-shortcut']"
        v-for="shortcut in shortcuts"
        @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
    </div>
    <div :class="[prefixCls + '-body']">
      <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
        <span :class="iconBtnCls('prev', '-double')" @click="changeYear(-1)"><Icon type="ios-arrow-left" /></span>
        <span
          v-if="pickerTable === 'date-table'"
          :class="iconBtnCls('prev')"
          @click="changeMonth(-1)"
          v-show="currentView === 'date'"><Icon type="ios-arrow-left" /></span>
        <date-panel-label
          :date-panel-label="datePanelLabel"
          :current-view="pickerTable.split('-').shift()"
          :date-prefix-cls="datePrefixCls" />
        <span
          :class="iconBtnCls('next', '-double')"
          @click="changeYear(+1)"><Icon type="ios-arrow-right" /></span>
        <span
          v-if="pickerTable === 'date-table'"
          :class="iconBtnCls('next')"
          @click="changeMonth(+1)"
          v-show="currentView === 'date'"><Icon type="ios-arrow-right" /></span>
      </div>
      <div :class="[prefixCls + '-content']">
        <component
          :is="pickerTable"
          ref="pickerTable"
          v-if="currentView !== 'time'"
          :table-date="panelDate"
          :start-date="startDate"
          :show-week-numbers="showWeekNumbers"
          :value="dates"
          :selection-mode="selectionMode"
          :disabled-date="disabledDate"
          @on-pick="panelPickerHandlers"
          @on-pick-click="handlePickClick" />
      </div>
      <div :class="[prefixCls + '-content']" v-show="isTime">
        <time-picker
          ref="timePicker"
          v-if="currentView === 'time'"
          :value="dates"
          :format="format"
          :time-disabled="timeDisabled"
          v-bind="timePickerOptions"
          @on-pick="handlePick"
          @on-pick-click="handlePickClick"
          @on-pick-clear="handlePickClear"
          @on-pick-success="handlePickSuccess"
          @on-pick-toggle-time="handleToggleTime" />
      </div>
      <Confirm
        v-if="confirm"
        :show-time="showTime"
        :is-time="isTime"
        :clearable="clearable"
        @on-pick-toggle-time="handleToggleTime"
        @on-pick-clear="handlePickClear"
        @on-pick-success="handlePickSuccess" />
    </div>
  </div>
</template>
<script type="text/ecmascript-6"  src="./date.js"></script>
